<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #4361ee, #3f37c9);
        }

        .search-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .table-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .status-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .action-btn {
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark gradient-bg shadow">
    <div class="container">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/">
            <i class="bi bi-shield-lock-fill me-2"></i>权限管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/">
                        <i class="bi bi-house-door me-1"></i>首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="${pageContext.request.contextPath}/users">
                        <i class="bi bi-people me-1"></i>用户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/roles">
                        <i class="bi bi-person-badge me-1"></i>角色管理
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容 -->
<div class="container my-5">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary">
            <i class="bi bi-people me-2"></i>用户管理
        </h2>
        <span class="badge bg-primary fs-6">总用户数: ${userCount}</span>
    </div>

    <!-- 搜索表单 -->
    <div class="card search-card mb-4">
        <div class="card-header bg-white">
            <h5 class="card-title mb-0">
                <i class="bi bi-search me-2 text-primary"></i>用户搜索
            </h5>
        </div>
        <div class="card-body">
            <form action="${pageContext.request.contextPath}/users" method="get" class="row g-3">
                <input type="hidden" name="action" value="search">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">用户名</label>
                    <input type="text" name="username" class="form-control" placeholder="输入用户名关键字">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">邮箱</label>
                    <input type="text" name="email" class="form-control" placeholder="输入邮箱关键字">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">状态</label>
                    <select name="status" class="form-select">
                        <option value="">全部状态</option>
                        <option value="0">启用</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search me-2"></i>搜索用户
                    </button>
                    <a href="${pageContext.request.contextPath}/users" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise me-2"></i>重置
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="card table-card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="bi bi-list-ul me-2 text-primary"></i>用户列表
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                    <tr>
                        <th class="ps-4">ID</th>
                        <th>登录名</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>状态</th>
                        <th>手机号</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="user" items="${users}">
                        <tr>
                            <td class="ps-4 fw-semibold">${user.id}</td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-person-circle me-2 text-muted"></i>
                                        ${user.loginname}
                                </div>
                            </td>
                            <td>${user.name}</td>
                            <td>
                                <c:if test="${not empty user.email}">
                                    <i class="bi bi-envelope me-1 text-muted"></i>${user.email}
                                </c:if>
                                <c:if test="${empty user.email}">
                                    <span class="text-muted">未设置</span>
                                </c:if>
                            </td>
                            <td>
                                <c:choose>
                                    <c:when test="${user.status == 0}">
                                        <span class="status-badge bg-success">启用</span>
                                    </c:when>
                                    <c:when test="${user.status == 1}">
                                        <span class="status-badge bg-danger">禁用</span>
                                    </c:when>
                                    <c:otherwise>
                                        <span class="status-badge bg-secondary">未知</span>
                                    </c:otherwise>
                                </c:choose>
                            </td>
                            <td>
                                <c:if test="${not empty user.mobilephone}">
                                    <i class="bi bi-phone me-1 text-muted"></i>${user.mobilephone}
                                </c:if>
                                <c:if test="${empty user.mobilephone}">
                                    <span class="text-muted">未设置</span>
                                </c:if>
                            </td>
                            <td class="text-center">
                                <a href="${pageContext.request.contextPath}/users?action=detail&username=${user.loginname}"
                                   class="btn btn-primary btn-sm action-btn">
                                    <i class="bi bi-eye me-1"></i>查看详情
                                </a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 分页控件 -->
    <c:if test="${not empty currentPage}">
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                <c:if test="${currentPage > 1}">
                    <li class="page-item">
                        <a class="page-link" href="?page=${currentPage - 1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                </c:if>

                <c:forEach begin="1" end="${totalPages}" var="i">
                    <li class="page-item ${i == currentPage ? 'active' : ''}">
                        <a class="page-link" href="?page=${i}">${i}</a>
                    </li>
                </c:forEach>

                <c:if test="${currentPage < totalPages}">
                    <li class="page-item">
                        <a class="page-link" href="?page=${currentPage + 1}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>
            </ul>
        </nav>
    </c:if>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>